<html>

<head>
    <meta charset="UTF-8">
    <title>lib_robot</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	 crossorigin="anonymous">
	<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script type="text/javascript" src="./roslib.min.js"></script>
    <script type="text/javascript" src="./ros3d.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/roslib@1/build/roslib.js"></script>-->
    
</head>
<script>
function init() {
    var ros = new ROSLIB.Ros({
        url : 'ws://localhost:9090'
    });
// Create the main viewer.
var viewer = new ROS3D.Viewer({
divID : 'map',
width : 1500,
height : 500,
antialias : true
});

// Setup the marker client.
var gridClient = new ROS3D.OccupancyGridClient({
ros : ros,
rootObject : viewer.scene,
continuous: true
});
}
</script>

<body onload="init()" >
	<div id="app" class="container">
		<div class="jumbotron">
			<h1>Welcome to  lib_robot panel!!! </h1>
		</div>



		<div class="row" style="max-height:200px;">
			<div class="col-md-6">
				<h3>Connection status</h3>
				<p class="text-danger" v-if="!connected">Not connected!</p>
				<p class="text-success" v-if="connected">Connected!</p>
				<label>Websocket server address</label>
                <input type="text" v-model="ws_address" />
                <br><br>
                <button :disabled="loading" class="btn btn-danger" @click="disconnect" v-if="connected">Disconnect!</button>
                <button :disabled="loading" class="btn btn-success" @click="connect" v-else>Connect!</button>
			</div>
			<div class="col-md-6" style="max-height:200px; overflow:auto;">
				<h3>连接日记(logging_info)</h3>
                <div>
                    <p v-for="log of logs">{{ log }}</p>
                </div>
			</div>
		</div>

        <hr>

        <div class="row">
            <div class="col-md-12 text-center">
                <h5>构建地图</h5>
            </div>

            <!-- 1st row -->
            <div class="col-md-12 text-center">
                <button @click="forward" :disabled="loading || !connected" class="btn btn-primary">Go forward</button>
                <br><br>
            </div>

            <!-- 2nd row -->
            <div class="col-md-4 text-center">
                <button @click="turnLeft" :disabled="loading || !connected" class="btn btn-primary">Turn left</button>
            </div>
            <div class="col-md-4 text-center">
                <button @click="stop" :disabled="loading || !connected" class="btn btn-danger">Stop</button>
                <br><br>
            </div>
            <div class="col-md-4 text-center">
                <button @click="turnRight" :disabled="loading || !connected" class="btn btn-primary">Turn right</button>
            </div>

            <!-- 3rd row -->
            <div class="col-md-12 text-center">
                <button @click="backward" :disabled="loading || !connected" class="btn btn-primary">Go backward</button>
            </div>
        </div>

	</div>

	<script type="text/javascript" src="main.js"></script>
    <div id="map"></div>
</body>

</html>
